<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竞赛首页</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		//banner轮播

		var n = $(window).width();
		$('#banner ul li').width(n);
		$('#banner ul').width(4 * n);
		$('.banner .cont').width(n);
		$('.banner .cont').css('margin-left', -0.5 * n + 'px');
		//alert($('#nav ul li').width());
		var ulnum = 0;//定义变量控制UL里的l
		var olnum = 0;
		var timer = null;//定义定时器；
		//定义函数简化代码：定时器轮播和向右轮播的操作是一样的。
		function myFn() {
			ulnum++;
			olnum++;
			if (olnum > 2) {
				olnum = 0;
			}
			if (ulnum > 3) {
				$('#banner ul').css('left', '0px');//向右移动到极值是，瞬间让ul的left回到0，实现无缝轮播；	
				ulnum = 1;
			}
			$('#banner ol li').eq(olnum).addClass('current').siblings()
					.removeClass('current');
			$('#banner ul').stop().animate({
				'left' : -n * ulnum + 'px'
			}, 1000)

		}
		//右
		$('.banner .cont .an .right').click(function(e) {
			myFn();
		});
		//左
		$('.banner .cont .an .left').click(
				function(e) {
					olnum--;
					ulnum--;
					if (olnum < 0) {
						olnum = 2;
					}
					if (ulnum < 0) {
						$('#banner ul').css('left', '-1600px');//向左移动到极值是，瞬间让ul的left到达-1600px，实现无缝轮播；	
						ulnum = 2;
					}
					$('#banner ol li').eq(olnum).addClass('current').siblings()
							.removeClass('current');
					$('#banner ul').stop().animate({
						'left' : -n * ulnum + 'px'
					}, 1000)
				});
		//ol里li的点击事件
		$('#banner ol li').click(function(e) {
			olnum = $(this).index();
			ulnum = $(this).index();
			$(this).addClass('current').siblings().removeClass('current');
			$('#banner ul').stop().animate({
				'left' : -n * ulnum + 'px'
			}, 1000)
		});

		//开起定时轮播
		timer = setInterval(function() {
			myFn();
		}, 2000);
		$('#banner').hover(function(e) {
			clearInterval(timer);
		}, function() {
			timer = setInterval(function() {
				myFn();
			}, 2000);
		});

		//学校轮播
		var num = 0;//定义变量控制UL里的li
		var timer2 = null;//定义定时器；
		//定义函数简化代码：定时器轮播和向右轮播的操作是一样的。
		function myFn2() {
			num++;
			if (num > 2) {
				$('#school ul').css('left', '0px');//向右移动到极值是，瞬间让ul的left回到0，实现无缝轮播；	
				num = 1;
			}
			$('#school ul').stop().animate({
				'left' : -504 * num + 'px'
			}, 1000)

		}

		timer2 = setInterval(function() {
			myFn2();
		}, 2000);
		$('#school').hover(function(e) {
			clearInterval(timer2);
		}, function() {
			timer2 = setInterval(function() {
				myFn2();
			}, 2000);
		});
	})
</script>

</head>

<body>
	<div class="header">
		<h1>
			<a href="#">松大竞赛</a>
		</h1>
		<ul>
			<li class="li1"><a href="#">登录</a></li>
			<li class="li2"><a href="#">注册</a></li>
		</ul>
	</div>

	<div class="nav">
		<div class="con">
			<ul>
				<li><a href="#">竞赛主页</a></li>
				<li><a href="#">赛前练习</a></li>
				<li><a href="#">成绩查询</a></li>
			</ul>
		</div>
	</div>

	<div class="banner">
		<div class="cont" id="banner">

			<ul>
				<li><a href="#"><img src="img/banner.png" width="1920"
						height="380" /></a></li>
				<li><a href="#"><img src="img/banner.png" width="1920"
						height="380" /></a></li>
				<li><a href="#"><img src="img/banner.png" width="1920"
						height="380" /></a></li>
				<!--和第一个banner图相同-->
				<li><a href="#"><img src="img/banner.png" width="1920"
						height="380" /></a></li>
			</ul>

			<ol>
				<li class="current"></li>
				<li></li>
				<li></li>

			</ol>
			<div class="an">
				<span class="left"></span> <span class="right"></span>
			</div>
		</div>

	</div>

	<div class="content">
		<div class="left">
			<h3>竞赛简介</h3>
			<div class="xq">
				<p>竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介
				</p>
			</div>
		</div>
		<div class="right">
			<div class="top">
				<h3>竞赛公告</h3>
				<a href="javascript:;"><img src="img/baoming.png" width="87"
					height="25" /></a>
			</div>
			<div class="xq">
				<p>
					预备练习：2016-10-20 &nbsp; &nbsp; 12:00:00<br /> 正式比赛：2016-10-20
					&nbsp; &nbsp; 09-00-00<br /> 成绩查询：<br /> 评奖时间：<br /> <span
						class="gz">比赛规则介绍<br />
					</span>
				</p>
			</div>

		</div>
	</div>

	<div class="content content2">
		<div class="left">
			<div class="top">
				<h3>竞赛新闻</h3>
				<a href="javascript:;"><img src="img/jinru.png" width="87"
					height="25" /></a>
			</div>
			<div class="xq">
				<p>竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介竞赛简介
				</p>
			</div>
		</div>
		<div class="right">
			<div class="top">
				<h3>竞赛信息</h3>
				<a href="javascript:;"><img src="img/chaxun.png" width="87"
					height="25" /></a>
			</div>
			<div class="xq">
				<ul>
					<li><a href="javascript:;">[最新资讯]2016志愿填报：性格内向爱独处选什么 专业？</a></li>
					<li><a href="javascript:;">[最新资讯]2016高考填志愿：什么专业就业面极广 ？</a></li>
					<li><a href="javascript:;">[最新资讯]2016高考志愿填报：高职高专选哪些专

							业就业率...</a></li>
					<li><a href="javascript:;">[最新资讯]2016年高考志愿填报：“理工科10年潜

							力股”专...</a></li>
					<li><a href="javascript:;">[最新资讯]2016年高考志愿填报：盘点热门专业的 就业陷阱</a></li>
					<li><a href="javascript:;">[最新资讯]高考后考生莫把放松变放纵</a></li>
					<li><a href="javascript:;">[最新资讯]高考已经过去 人生刚刚开始</a></li>
				</ul>

			</div>

		</div>
	</div>

	<div class="tu">
		<img src="img/t2.png" width="1100" height="60" />
	</div>

	<div class="content3">
		<div class="left">
			<h3>
				教师同台竞艺<span class="sp1">精彩回顾</span><span class="sp2">2015/2014</span>
			</h3>
			<div class="video">
				<video src="视频的路径" width="508" height="286" autoplay="autoplay"
					controls="controls"> </video>
			</div>
		</div>
		<div class="right">
			<h3>教指委公文</h3>
			<div class="xq">
				<ul>
					<li><a href="javascript:;">[最新资讯]2016志愿填报：性格内向爱独处选什么 专业？</a></li>
					<li><a href="javascript:;">[最新资讯]2016高考填志愿：什么专业就业面极广 ？</a></li>
					<li><a href="javascript:;">[最新资讯]2016高考志愿填报：高职高专选哪些专

							业就业率...</a></li>
					<li><a href="javascript:;">[最新资讯]2016年高考志愿填报：“理工科10年潜

							力股”专...</a></li>
					<li><a href="javascript:;">[最新资讯]2016年高考志愿填报：盘点热门专业的 就业陷阱</a></li>
					<li><a href="javascript:;">[最新资讯]高考后考生莫把放松变放纵</a></li>
					<li><a href="javascript:;">[最新资讯]高考已经过去 人生刚刚开始</a></li>
				</ul>
			</div>
		</div>

	</div>

	<div class="tu">
		<img src="img/tu2.png" width="1100" height="60" />
	</div>

	<div class="content4">
		<div class="left">
			<p class="t">参赛学校名单</p>
			<div class="con" id="school">
				<ul class="move">
					<li class="li">
						<ul>
							<li><a href="javascript:;"><img src="img/1.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/2.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/3.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/4.png"
									width="186" height="51" /></a></li>

						</ul>

					</li>
					<li class="li">
						<ul>
							<li><a href="javascript:;"><img src="img/1.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/2.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/3.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/4.png"
									width="186" height="51" /></a></li>

						</ul>

					</li>
					<li class="li">
						<ul>
							<li><a href="javascript:;"><img src="img/1.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/2.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/3.png"
									width="186" height="51" /></a></li>
							<li><a href="javascript:;"><img src="img/4.png"
									width="186" height="51" /></a></li>

						</ul>

					</li>


				</ul>

			</div>
		</div>
		<div class="right">
			<img src="img/tu3.png" width="542" height="311" />
		</div>
	</div>



	<div class="footer">
		<div class="f_nav">
			<span></span>
			<ul>
				<li><a href="javascript:;">关于我们</a></li>
				<li><a href="javascript:;">联系我们</a></li>
				<li><a href="javascript:;">常见问题</a></li>
				<li><a href="javascript:;">通知公告</a></li>
				<li><a href="javascript:;">使用帮助</a></li>
			</ul>
		</div>
		<p>Copyright © 2011-2020 深圳市松大科技有限公司 版权所有 保留一切权利 粤ICP备11037362号
			|粤ICP备11037362号-1</p>
	</div>




</body>
</html>
